<template>
  <div class="leftMenu">
    <div class="left">
      <el-row class="tac">
        <el-col :span="12">
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @select="selec"
            background-color="#303136"
            text-color="blue"
            :default-active="defaultActive"
            active-text-color="#ffd04b"
            :router="true"
          > 
            <el-submenu index="report">
              <template slot="title">
                <i class="el-icon-date"></i>
                <span>测试报告</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="testReport">测试报告</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="liang">
              <template slot="title">
                <i class="el-icon-date"></i>
                <span>用例管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="func">功能</el-menu-item>
                <el-menu-item index="autoInterface">接口</el-menu-item>
                <!-- <el-menu-item index="performance">性能</el-menu-item> -->
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="tool">
              <template slot="title">
                <i class="el-icon-star-on"></i>
                <span>接口测试</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="zcapi">计划管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            
            <el-submenu index="projectManager">
              <template slot="title">
                <i class="el-icon-star-on"></i>
                <span>项目管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="projectManager">项目管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>


            <el-submenu index="interface">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>环境变量</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="zcInterface">展翅</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaultActive: "2",
    };
  },
  components: {},
  methods: {
    open(index, indexPath) {
      console.log("111");
    },

    selec(index, indexPath) {
      console.log(index, indexPath);
    },
    handleOpen(key, keyPath) {
      console.log(key);
      console.log(keyPath);

      // console.log(key, keyPath);
      // console.log(this.defaultActive, "-dadad--");

      //   this.$router.push(key)
      // console.log(key)
      // let addre = keyPath.join("/")
      // console.log(typeof Array.from(keyPath));
      // this.$router.push(keyPath[1])
    },
    handleClose(key, keyPath) {
      console.log(key);
      // console.log(key, keyPath);
    },
  },
  mounted() {},
};
</script>


<style lang='scss' scoped>
li.el-menu-item {
  color: #c2c2c4 !important; // 提高权重
  font-weight: bold !important;
  padding-left: 100px !important;
}

.el-menu-vertical-demo.el-menu {
  margin-left: -60px;
  .el-submenu {
    margin-bottom: 15px;
    .el-submenu__title {
      // margin-left: -65px;
      padding-left: 0px !important;
      span {
        padding-left: 20px;
        color: #c2c2c4;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}

.el-submenu {
  text-align: center;
}
.leftMenu {
  flex: 1;
  overflow-y: scroll;
}

#app {
  div {
    height: 100%;
  }
}
.el-col {
  width: 240px;
  height: calc(100% - 50px);
  background: #303136;
}

.tac el-row {
  height: auto;
  width: 240px;
}
</style>
